<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市夜间行走</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        body {
            position: relative;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at center, #1f1925, #2c2334);
            overflow: hidden
        }

        body:before,
        body:after {
            content: '';
            position: absolute;
            width: 200%;
            height: 50%;
            left: -50%;
            top: calc(50% + 10px);
            background: #644350
        }

        body:after {
            z-index: -1;
            height: calc(50% + 500px);
            top: -250px;
            background: linear-gradient(to top, #1f1925, rgba(255, 255, 255, 0)), radial-gradient(circle at center, #fcb3a4, #fcb3a4 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 20px), radial-gradient(circle at center, #fcb3a4, #fcb3a4 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 20px);
            background-size: 100%, 100px 100px, 100px 100px;
            background-position: 50%, 40px 40px, 0px 90px;
            opacity: 0.75;
            transform-style: preserve-3d;
            animation: starwipe 10s linear infinite
        }

        @keyframes starwipe {
            0% {
                transform: skewX(20deg)
            }

            50% {
                transform: skewX(0deg)
            }

            100% {
                transform: skewX(20deg)
            }
        }

        body .lt {
            position: absolute;
            z-index: 9;
            width: 40%;
            height: 100%;
            left: 0;
            top: 0
        }

        body .lt:hover~.wrap {
            perspective-origin: 75% 50%
        }

        body .rt {
            position: absolute;
            z-index: 9;
            width: 40%;
            height: 100%;
            right: 0;
            top: 0
        }

        body .rt:hover~.wrap {
            perspective-origin: 25% 50%
        }

        body .wrap {
            width: 400px;
            height: 200px;
            perspective: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            transition: 0.4s ease-in-out
        }

        body .wrap .cube {
            width: 100%;
            height: 200%;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(0deg)
        }

        body .wrap .cube .face {
            margin: 0;
            width: 400px;
            height: 100%;
            display: block;
            position: absolute
        }

        body .wrap .cube .face:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(200px)
        }

        body .wrap .cube .face:nth-of-type(2) {
            transform: rotateX(180deg) translateZ(200px)
        }

        body .wrap .cube .face:nth-of-type(3) {
            transform: rotateY(90deg) translateZ(200px)
        }

        body .wrap .cube .face.building1 {
            margin-left: -500px;
            transform: rotateY(-90deg) translateZ(25px);
            transform-style: preserve-3d;
            background: #835768;
            width: 50px;
            height: 800px;
            bottom: 0px;
            animation: lefttoright 7s ease-in-out infinite
        }

        body .wrap .cube .face.building1.outer {
            margin-left: -2000px;
            animation-duration: 10s
        }

        body .wrap .cube .face.building1:nth-of-type(1) {
            animation-delay: -0.75s
        }

        body .wrap .cube .face.building1:nth-of-type(2) {
            animation-delay: -1.5s
        }

        body .wrap .cube .face.building1:nth-of-type(3) {
            animation-delay: -2.25s
        }

        body .wrap .cube .face.building1:nth-of-type(4) {
            animation-delay: -3s
        }

        body .wrap .cube .face.building1:nth-of-type(5) {
            animation-delay: -3.75s
        }

        body .wrap .cube .face.building1:nth-of-type(6) {
            animation-delay: -4.5s
        }

        body .wrap .cube .face.building1:nth-of-type(7) {
            animation-delay: -5.25s
        }

        body .wrap .cube .face.building1:nth-of-type(8) {
            animation-delay: -6s
        }

        body .wrap .cube .face.building1:nth-of-type(9) {
            animation-delay: -6.75s
        }

        body .wrap .cube .face.building1:nth-of-type(10) {
            animation-delay: -7.5s
        }

        body .wrap .cube .face.building1:nth-of-type(11) {
            animation-delay: -8.25s
        }

        body .wrap .cube .face.building1:nth-of-type(12) {
            animation-delay: -9s
        }

        body .wrap .cube .face.building1:nth-of-type(13) {
            animation-delay: -9.75s
        }

        body .wrap .cube .face.building1:nth-of-type(14) {
            animation-delay: -10.5s
        }

        body .wrap .cube .face.building1:nth-of-type(15) {
            animation-delay: -11.25s
        }

        body .wrap .cube .face.building1:nth-of-type(16) {
            animation-delay: -12s
        }

        body .wrap .cube .face.building1:nth-of-type(17) {
            animation-delay: -12.75s
        }

        body .wrap .cube .face.building1:nth-of-type(18) {
            animation-delay: -13.5s
        }

        body .wrap .cube .face.building1:nth-of-type(19) {
            animation-delay: -14.25s
        }

        body .wrap .cube .face.building1:nth-of-type(20) {
            animation-delay: -15s
        }

        body .wrap .cube .face.building1:nth-of-type(21) {
            animation-delay: -15.75s
        }

        body .wrap .cube .face.building1:nth-of-type(22) {
            animation-delay: -16.5s
        }

        body .wrap .cube .face.building1:nth-of-type(23) {
            animation-delay: -17.25s
        }

        body .wrap .cube .face.building1:nth-of-type(24) {
            animation-delay: -18s
        }

        body .wrap .cube .face.building1:nth-of-type(25) {
            animation-delay: -18.75s
        }

        body .wrap .cube .face.building1:nth-of-type(26) {
            animation-delay: -19.5s
        }

        body .wrap .cube .face.building1:nth-of-type(27) {
            animation-delay: -20.25s
        }

        body .wrap .cube .face.building1:nth-of-type(28) {
            animation-delay: -21s
        }

        body .wrap .cube .face.building1:nth-of-type(29) {
            animation-delay: -21.75s
        }

        body .wrap .cube .face.building1:nth-of-type(30) {
            animation-delay: -22.5s
        }

        body .wrap .cube .face.building1:nth-of-type(31) {
            animation-delay: -23.25s
        }

        body .wrap .cube .face.building1:nth-of-type(32) {
            animation-delay: -24s
        }

        body .wrap .cube .face.building1:nth-of-type(33) {
            animation-delay: -24.75s
        }

        body .wrap .cube .face.building1:nth-of-type(34) {
            animation-delay: -25.5s
        }

        body .wrap .cube .face.building1:nth-of-type(35) {
            animation-delay: -26.25s
        }

        body .wrap .cube .face.building1:nth-of-type(36) {
            animation-delay: -27s
        }

        body .wrap .cube .face.building1:nth-of-type(37) {
            animation-delay: -27.75s
        }

        body .wrap .cube .face.building1:nth-of-type(38) {
            animation-delay: -28.5s
        }

        body .wrap .cube .face.building1:nth-of-type(39) {
            animation-delay: -29.25s
        }

        body .wrap .cube .face.building1:nth-of-type(40) {
            animation-delay: -30s
        }

        body .wrap .cube .face.building1:nth-of-type(3n) {
            height: 400px
        }

        body .wrap .cube .face.building1:nth-of-type(4n) {
            height: 600px;
            margin-left: -700px
        }

        body .wrap .cube .face.building1:nth-of-type(6n) {
            height: 1400px
        }

        @keyframes lefttoright {
            0% {
                transform: rotateY(-90deg) translateZ(25px) translateX(-1000%);
                background: #462e37
            }

            100% {
                transform: rotateY(-90deg) translateZ(25px) translateX(200%);
                background: #835768
            }
        }

        body .wrap .cube .face.building1:before {
            content: '';
            position: absolute;
            width: 300px;
            height: 100%;
            background: linear-gradient(to bottom, #fcb3a4, #8a5967);
            top: 0;
            left: 0;
            transform: rotateY(90deg) translateZ(-250px);
            transform-origin: 100% 50%
        }

        body .wrap .cube .face.building1.right {
            margin-left: 800px
        }

        body .wrap .cube .face.building1.right.outer {
            margin-left: 2000px;
            animation-duration: 10s
        }

        body .wrap .cube .face.building1.right:before {
            transform: rotateY(90deg) translateZ(-250px) translateX(100%)
        }

        body .wrap .cube .face.building1.right:nth-of-type(4n) {
            height: 600px;
            margin-left: 1000px
        }

        body .wrap .cube .face.building1.right:nth-of-type(6n) {
            height: 1200px
        }

        body .wrap .cube .face:nth-of-type(5) {
            transform: rotateX(90deg) translateZ(200px)
        }

        body .wrap .cube .face.road {
            height: 200%;
            top: -75%;
            background: repeating-linear-gradient(to bottom, transparent, transparent 5px, #2c2334 5px, #2c2334 15px), linear-gradient(to right, #2c2334, #2c2334 48%, #fcb3a4 48%, #fcb3a4 52%, #2c2334 52%);
            transform: rotateX(-90deg) translateZ(200px);
            animation: animatedBackground 30s linear infinite
        }

        @keyframes animatedBackground {
            from {
                background-position: 0 1000px
            }

            to {
                background-position: 0 -1000px
            }
        }
    </style>
</head>

<body>
    <div class='lt'></div>
    <div class='rt'></div>
    <div class='wrap'>
        <div class='cube'>
            <div class='face road'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 left'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 right'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 left outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
            <div class='face building1 right outer'></div>
        </div>
    </div>
</body>

</html>